<template>
  <div class="tool-page">
    <Breadcrumb />
    
    <div class="tool-header">
      <div class="container">
        <h1>{{ title }}</h1>
        <div class="subtitle-group">
          <p class="subtitle">{{ description }}</p>
        </div>
      </div>
    </div>

    <div class="tool-content">
      <div class="container">
        <div class="tool-panel">
          <!-- 工具具体内容 -->
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Breadcrumb from '@/components/Breadcrumb.vue'

defineProps<{
  title: string
  description: string
}>()
</script>

<style scoped lang="scss">
.tool-page {
  .tool-header {
    background: linear-gradient(135deg, var(--primary-color), var(--hover-color));
    padding: 20px 0;
    color: white;
    text-align: center;
    margin-top: -1px;

    h1 {
      font-size: 1.8rem;
      margin-bottom: 0.5rem;
    }

    .subtitle-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;

      .subtitle {
        font-size: 0.95rem;
        opacity: 0.9;
        background: rgba(255, 255, 255, 0.1);
        padding: 6px 16px;
        border-radius: 20px;
        backdrop-filter: blur(10px);
      }
    }
  }

  .tool-content {
    padding: 40px 0;

    .tool-panel {
      background: white;
      border-radius: 12px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      padding: 30px;
    }
  }
}
</style> 